<template>
  <div class="card">
    <Tabs :value="1">
      <TabList>
        <Tab :key="1" :value="1">工具</Tab>
        <Tab :key="2" :value="2">模拟输入</Tab>
<!--        <Tab :key="3" :value="3">消息</Tab>-->
        <Tab :key="4" :value="4">设置</Tab>
      </TabList>
      <TabPanels>
        <TabPanel :key="1" :value="1">
          <Listbox :options="scriptList" optionLabel="title" scrollHeight="22rem">
            <template #option="slotProps">
              <div class="flex items-center" @click="() => openWindow(slotProps.option.script)">
                <div>{{ slotProps.option.name }}</div>
              </div>
            </template>
          </Listbox>
        </TabPanel>
        <TabPanel :key="2" :value="2">
          <Textarea v-model="simulateContent" rows="12" cols="38" spellcheck="false"/>
          <Button label=" 开始输入" :loading="simulateLoading" @click="simpluteInput"/>
        </TabPanel>
<!--        <TabPanel :key="3" :value="3">-->
<!--          <Transport></Transport>-->
<!--        </TabPanel>-->
        <TabPanel :key="4" :value="4">
          <div class="flex items-center">
            <label class="w-32 font-bold block"> 当前用户 </label>
            <Select @change="userChangeEvent" v-model="config.current_account" :options="config.users"
                    optionLabel="name" optionValue="account" class="w-full md:w-56"/>
          </div>
          <div class="mt-3 flex items-center">
            <label class="w-32 font-bold block"> 4A账户 </label>
            <InputText class="w-full" type="text" disabled v-model="settingFormSate.account"/>
          </div>

          <div class="mt-3 flex items-center">
            <label for="mile" class="w-32 font-bold block"> 手机 </label>
            <InputText class="w-full" type="text" v-model="settingFormSate.phone"/>
          </div>
          <div class="mt-3 flex items-center">
            <label for="mile" class="w-32 font-bold block"> 邮箱 </label>
            <InputText class="w-full" type="text" v-model="settingFormSate.email"/>
          </div>
          <div class="mt-3 flex items-center">
            <label for="mile" class="w-32 font-bold block"> 手机 </label>
            <InputText class="w-full" type="text" v-model="settingFormSate.phone"/>
          </div>
          <div class="mt-3 flex justify-center gap-3">
            <Button label="保存" :loading="simulateLoading" @click="updateSettings"/>
            <!--<Button label="更新配置" :loading="simulateLoading" @click="updateSettings"/>-->
          </div>
        </TabPanel>
      </TabPanels>
    </Tabs>


    <Toast position="center" style="width: 300px">
      <template #message="slotProps">
        <div class="flex flex-col items-start flex-auto">
          <div class="flex items-center gap-2">
            <span class="font-bold">提示</span>
          </div>
          <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
        </div>
      </template>
    </Toast>
  </div>
</template>

<script setup>
import {ref, onMounted, reactive} from 'vue';
import {useToast} from "primevue/usetoast";
// import Transport from "./Transport.vue";

const toast = useToast();

const simulateLoading = ref(false)
const simulateContent = ref()
const scriptList = ref([])
const config = ref({})
let currentIndex = -1
const settingFormSate = reactive({
  name: '',
  account: '',
  email: '',
  phone: ''
})

const simpluteInput = async () => {
  simulateLoading.value = true
  toast.add({severity: 'info', summary: '3 秒后输入，请点击输入框', life: 3000});
  setTimeout(async () => {
    await pywebview.api.simulate_typing(simulateContent.value)
    simulateLoading.value = false
  }, 3000); // 3000
}

function openWindow(name) {
  pywebview.api.open_script_window(name)
}

const updateSettings = async () => {
  let newConfig = JSON.parse(JSON.stringify(config.value));
  newConfig.users[currentIndex] = {...settingFormSate}
  await pywebview.api.update_config({...newConfig});
}

const updateData = async () => {
//    let newConfig = JSON.parse(JSON.stringify(config.value));
//    newConfig.users[currentIndex] = {...settingFormSate}
  await pywebview.api.update_data();
}

function userChangeEvent() {
  const infos = config.value.users.filter((item) => item.account == config.value.current_account)
  if (infos.length > 0) {
    const info = {...infos[0]}
    currentIndex = config.value.users.indexOf(infos[0])
    settingFormSate.name = info.name
    settingFormSate.account = info.account
    settingFormSate.email = info.email
    settingFormSate.phone = info.phone
  }
}

onMounted(() => {
  window.addEventListener('pywebviewready', async function () {
    try {
      console.log('sdf--')
      scriptList.value = await pywebview.api.get_script_list();
      console.log(scriptList.value)
      config.value = await pywebview.api.refresh_config();
      userChangeEvent()
    } catch (error) {
      console.error('Failed to fetch script meta:', error);
    }
  });
});

</script>
